<template>
  <view class="systemMessage">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      :up="upOption"
      @up="upCallback"
      @emptyclick="emptyClick"
      top="0"
    >
      <!-- 数据列表 -->
      <good-list :list="goods"></good-list>
    </mescroll-uni>
    <!-- 搜索悬浮 -->
    <view class="sousuo" @tap="search_data">
      <view class="iconfont icon-ziyuan"></view>
    </view>
    <!-- 搜索表单 -->
    <u-popup v-model="popup.show" mode="center" border-radius="10">
      <view class="u-popup">
        <view class="u-popup-title">{{$t('搜索')}}</view>
        <view class="u-popup-center">
          <u-form :model="popup.form" ref="uForm" label-width="180">
            <u-form-item :label="$t('申请单名')">
              <u-input v-model="popup.form.title" />
            </u-form-item>
            <u-form-item :label="$t('申请用户')">
              <u-input v-model="popup.form.username" />
            </u-form-item>
            <u-form-item :label="$t('开始时间')">
              <u-input v-model="popup.form.start" disabled @click="checkTime('start')" />
              <u-icon
                v-if="popup.form.start"
                name="close-circle-fill"
                color="#888"
                size="40"
                @click="popup.form.start = ''"
              ></u-icon>
            </u-form-item>
            <u-form-item :label="$t('结束时间')">
              <u-input v-model="popup.form.end" disabled @click="checkTime('end')" />
              <u-icon
                v-if="popup.form.end"
                name="close-circle-fill"
                color="#888"
                size="40"
                @click="popup.form.end = ''"
              ></u-icon>
            </u-form-item>
          </u-form>
        </view>
        <view class="u-popup-foot">
          <text class="text" @click="popup.show = false">{{$t('取消')}}</text>
          <text class="text text2" @click="seachComfig">{{$t('确定')}}</text>
        </view>
      </view>
    </u-popup>
    <u-picker
      mode="time"
      v-model="popup.picker.show"
      @confirm="pickerendshowFn"
      :params="popup.picker.params"
    ></u-picker>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import goodList from './goodList.vue'
export default {
  mixins: [MescrollMixin],
  computed: { ...mapGetters(['userInfo', 'api']) },
  components: {
    goodList
  },
  data() {
    return {
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无记录')} ~`,
          fixed: true,
          top: '200rpx'
        },
        textNoMore: `~ ${this.$t('触底了')} ~`
      },
      goods: [], //列表数据
      popup: {
        show: false,
        picker: {
          show: false,
          type: '', //当前选择的时间字段
          params: {
            year: true,
            month: true,
            day: true,
            hour: true,
            minute: true,
            second: true,
            // 选择时间的时间戳
            timestamp: true
          }
        },
        form: {
          title: '',
          username: '',
          start: '',
          end: ''
        }
      }
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({ title: this.$t('智能OCR') })
  },
  methods: {
    //选择时间
    checkTime(type) {
      this.popup.picker.type = type
      this.popup.picker.show = true
    },
    pickerendshowFn(e) {
      if (this.popup.picker.type === 'start') {
        this.popup.form.start =
          e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
      } else {
        this.popup.form.end =
          e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
      }
    },
    search_data() {
      this.popup.show = true
      this.popup.form.start = this.$lizhao.date.getBeforeDate(-7) + ' 0:0:0' //获取前5天的日期
      this.popup.form.end = this.$lizhao.date.getBeforeDate(1) + ' 23:59:59' //获取明天日期
    },
    //确定搜索
    seachComfig() {
      this.popup.show = false
      this.downCallback()
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.goods = []
      // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      // loadSwiper();
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //使用记录
      this.PrintingRecord(page)
    },
    //使用记录
    PrintingRecord(page) {
      let req = {
        pageSize: page.size, //每页的数量
        pageNum: page.num, // 当前显示第几页
        page: true,
        ...this.popup.form
      }
      //章的接口
      this.$u
        .post(this.api.GLOBAL_application_application_findApplicationList, req)
        .then((res) => {
          if (page.num === 1) {
            this.goods = []
          }
          if (res.code === 200 && res.data && res.data.list) {
            this.mescroll.endBySize(res.data.list.length, res.data.total)
            this.goods = this.goods.concat(res.data.list)
          } else {
            this.mescroll.endBySize(0, 0)
            this.goods = []
          }
        })
        .catch((err) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },
    //点击空布局按钮的回调
    emptyClick() {}
  }
}
</script>
<style lang="scss" scoped>
.systemMessage {
  .u-popup {
    padding: 20rpx 20rpx 0;
    .u-popup-title {
      width: 100%;
      text-align: center;
    }
    .u-popup-center {
    }
    .u-popup-foot {
      display: flex;
      justify-content: space-between;
      .text {
        flex: 1;
        text-align: center;
        line-height: 80rpx;
      }
      .text2 {
        color: #007aff;
      }
    }
  }

  .sousuo {
    position: absolute;
    bottom: 30upx;
    right: 10upx;
    background: #009bde;
    border-radius: 50%;
    width: 80upx;
    height: 80upx;
    text-align: center;
    line-height: 80upx;
    color: white;
    z-index: 1000;
  }
}
</style>
